/*
* @Date: 2020/6/10
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Accordion } from 'antd-mobile';
import ReactDOM from 'react-dom';
import { Input, Form, Modal } from 'antd';

export default {
  props: [{
    key: 'activeKey',
    type: 'string',
    label: '激活面板Key'
  }, {
    key: 'defaultActiveKey',
    type: 'string',
    label: '初始面板Key'
  }, {
    key: 'onChange',
    type: 'function',
    label: 'onChange'
  }, {
    key: 'accordion',
    type: 'select',
    options: ['true', 'false'],
    label: '手风琴模式',
    default: true,
  }, {
    key: 'openAnimation',
    type: 'string',
    label: '切换动画'
  }],
  /**
   * children渲染函数
   * @param param 参数
   */
  childRender: (param, page) => {
    const children = [];
    const childCount = param.itemCount;
    for (let i = 0; i < childCount; i++) {
      const dom =
        <Accordion.Panel>
          <div className="sortable view-item-box sub" data-component="AccordionPanel">

          </div>
        </Accordion.Panel>
      children.push(dom);
    }
    return (
      <React.Fragment>
        {
          children
        }
      </React.Fragment>
    )
  },

  childParamer: () => {
    return new Promise((resolve, reject) => {
      const div = document.createElement('div');
      document.body.append(div);
      const modal = (
        <Modal
          title="面板数量"
          visible
          closable
          onOk={() => {
            const val = Number($('#itemCount').val());
            $('.ant-modal-root').parent().remove();
            resolve({ itemCount: Number(val) });
          }}
          onCancel={() => {
            $('.ant-modal-root').parent().remove();
            reject(1);
          }}
        >
          <Form>
            <Form.Item
              label="面板数量"
              name="itemCount"
              rules={[{ required: true, message: '请输入面板数量' }]}
            >
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      );
      ReactDOM.render(modal, div);
    });
  }
}
